<template>
  <div class="p-normal">
    <a-button type="danger" class="mb-normal" @click="handlerDeleteUserConversations">
      删除所有对话
    </a-button>
    <a-table 
    :columns="columns" 
    :data-source="list"
    :customRow="handleClickRow"
    :loading="loading"
    >
      <a slot="id" slot-scope="text">{{ text }}</a>
      <a slot="create_time" slot-scope="text">{{ text }}</a>
      <a slot="update_time" slot-scope="text">{{ text }}</a>

      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <a-button type="danger" @click.stop="handleDeleteConversation(text, record)">
            删除
          </a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import {getConversations, deleteConversation, deleteUserConversations} from '@/utils/chat'
export default {
  name: 'UserHistory',
  data() {
    return {
      list: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '对话创建时间',
          dataIndex: 'create_time',
        },
        {
          title: '对话更新时间',
          dataIndex: 'update_time',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],

      loading: false
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(isLoading = true) {
      isLoading && (this.loading = true)
      getConversations({}).then(res => {
        this.list = res.data
        this.loading = false
      }).catch((err) => {
        console.log('err', err)
        this.loading = false
      })
    },
    handleClickRow(record, index){
      return {
        on: {
          click: () => {
            console.log(record, index)
            this.$router.push({path: '/home?conversation_id=' + record.id});
          }
        }
      }
    },
    handleDeleteConversation(text, record) {
      let that = this
      that.$confirm({
        title: '确定删除对话?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          deleteConversation({
            conversation_id: record.id
          }).then((res) => {
            console.log('res', res)
            that.$message.success('删除成功');

            that.getList()

            window.localStorage.setItem('deleteConversation', JSON.stringify({
              conversation_id: record.id,
              isDeleteAll: false
            }))
          }).catch(err => {
            console.log('err', err)
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    handlerDeleteUserConversations() {
      let that = this
      that.$confirm({
        title: '确定删除所有对话?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          deleteUserConversations({}).then(res => {
            console.log('res', res)
            that.$message.success('删除成功');

            that.getList()

            window.localStorage.setItem('deleteConversation', JSON.stringify({
              conversation_id: '',
              isDeleteAll: true
            }))
          }).catch(err => {
            console.log('err', err)
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  }
}
</script>
<style scoped>
@import '../assets/css/reset.css';
</style>